<template>
  <div class="wrap">
    <div>
<!--      <el-upload class="upload-demo"-->
<!--                 ref="upload"-->
<!--                 :multiple="false"-->
<!--                 :drag="true"-->
<!--                 :auto-upload="false"-->
<!--                 :file-list="files"-->
<!--                 :on-change="handleChange"-->
<!--                 :on-remove="removeFile"-->
<!--                 :limit="1">-->
<!--        <div class="upload-demo-info">-->
<!--          <em class="el-icon-upload upload-icon"/>-->
<!--          <div class="el-upload__text">{{ $t('message.FastenerInfoImportDlg.dragHere') }}-->
<!--            <em>{{ $t('message.FastenerInfoImportDlg.clickUpload') }}</em>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-upload>-->
      <!--请选择紧固件定位点线-->
      <query-list
              v-model="params.elements"
              :description="$t('message.heatSoundInsulationFastenerInstantiation.selectElements')"
              active="1"
              :tipMsg="$t('message.heatSoundInsulationFastenerInstantiation.selectElements')"
              @removeItem="removeItem">
      </query-list>
      <!--请选择对应的紧固件模板-->
      <div v-if="params.elements.length > 0">
        <div class="d-flex">
          <p><b>{{ $t('message.heatSoundInsulationFastenerInstantiation.selectTemplates') }}</b></p>
        </div>
        <div class="d-flex align-items-center" v-for="element in params.elements">
          <label class="el-form-item__label">{{element.name}}</label>
          <el-select v-model="element.selectName">
            <el-option
                    v-for="item in params.instanceNames"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" :disabled="isDisabled" @click="confirm">
        {{ $t('message.common.confirm') }}
      </el-button>
      <el-button @click="close">{{ $t('message.common.close') }}</el-button>
    </div>
  </div>
</template>

<script>
  import DialogMixin from "../DialogMixin";
  import {heatAndSoundInsulationCmd} from "../../../command/HeatAndSoundInsulationCommand";
  import {request} from "../../../util/Request";
  import {Vector3} from "three";
  import {ElementType} from "../../../modeling/TypeDefine";
  import {Matrix4} from "../../../../nodeApp/static/lib/crowncad-plugin-sdk-0.0.1";

  export default {
    mixins: [DialogMixin],
    name: "heatSoundInsulationFastenerInstantiation",
    data() {
      return {
        files: [],  // 文件列表
        file: null, // 当前选中的文件
        xmlData: null, //xml文件数据
        projectId: null,
        params: {
          elements: [],
          instanceNames: [
            "2580C00102G99", "2580C00202G99", "2580C00302G99", "2580C00402G99",
            "2580C00502G99", "2580C00602G99", "2580C00702G99", "2580C00802G99",
            "2580C00902G99", "2580C01002G99", "2580C01102G99", "2580C01502G99",
            "2580C01601G99", "2580C01202G99", "2580C01302G99", "2580C01402G99"
          ]
        },

      }
    },
    mounted() {
      heatAndSoundInsulationCmd.init(500, 300, 400, () => {
        heatAndSoundInsulationCmd.setSelectType([ElementType.CURVE, ElementType.EDGE, ElementType.DATUMLINE]);//ElementType.POINT, ElementType.DATUMPOINT, ElementType.ORIGINPOINT
        heatAndSoundInsulationCmd.handlePickElement(pickResult => {
          pickResult?.element?.forEach(data => {
            let element = data.element;
            let tmp = this.params.elements.find(ele => ele.id === element.id);
            if (!element || tmp) {
              return;
            }
            if (element.params?.entityRefName) {
              element.name = element.params?.entityRefName;
            }
            this.params.elements.push(element);
          });
        })
      });
    },
    methods: {
      changePluginContainerHeight() {
        heatAndSoundInsulationCmd.changePluginContainerHeight({
          minWidth: this.$el.clientWidth,
          maxHeight: this.$el.clientHeight + 10,
        });
      },
      handleChange(file) {
        this.file = file.raw; // 获取原始文件对象
        this.files = [file]; // 更新文件列表
        this.handleUpload(); // 自动上传文件
      },
      //上传文件
      async handleUpload() {
        try {
          const formData = new FormData();
          formData.append('file', this.file);
          let config = {
            timeout: 15000,
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          };

          let url = 'fastener/uploadXml';
          let response = await request.post(url, formData, config);
          this.xmlData = response.data;
        } catch (error) {
          console.error('文件上传失败:', error.response ? error.response.data : error.message);
        }
      },
      //移除文件
      removeFile() {
        this.files.splice(0);
        this.file = null;
        this.xmlData = null;
        this.projectId = null;
      },
      removeItem(item) {
        if (item?.selectName) {
          item.selectName = null;
        }
      },
      //确定
      async confirm() {
        await heatAndSoundInsulationCmd.fastenerInstantiation(this.params);
      },

      close() {
        heatAndSoundInsulationCmd.closeActiveCmd();
      }
    },
    computed: {
      isDisabled() {
        if (this.params.elements.length > 0) {
          return false;
        } else {
          return true;
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    font-size: 12px;
  }
</style>